$(function() {
	//页面加载完成之后执行
	pageInit();
});

function pageInit() {
	var currentId;
	//创建jqGrid组件
	jQuery("#list2").jqGrid({
		url: '../data/JSONData.json', //组件创建完成之后请求数据的url
		datatype: "json", //请求数据返回的类型。可选json,xml,txt
		colNames: ['id', 'chName', 'enName', 'position', 'sex', 'mobilephone', 'department','project_group'], //jqGrid的列显示名字
		colModel: [ //jqGrid每一列的配置信息。包括名字，索引，宽度,对齐方式.....
			{
				name: 'id',
				index: 'id',
				width: 55
			},
			{
				name: 'chName',
				index: 'chName',
				width: 90,
				editable: true,
				editoptions: {
				size: 10
				}
			},
			{
				name: 'enName',
				index: 'enName',
				width: 100,
				editable: true,
				editoptions: {
				size: 10
				}
			},
			{
				name: 'position',
				index: 'position',
				width: 80,
				align: "right",
				editable: true,
				editoptions: {
				size: 10
				}
			},
			{
				name: 'sex',
				index: 'sex',
				width: 80,
				align: "right",
				editable: true,
				editoptions: {
				size: 10
				}
			},
			{
				name: 'mobilephone',
				index: 'mobilephone',
				width: 80,
				align: "right",
				editable: true,
				editoptions: {
				size: 10
				}
			},
			{
				name: 'department',
				index: 'department',
				width: 150,
				editable: true,
				editoptions: {
				size: 10
				}
			},
			{
				name: 'project_group',
				index: 'project_group',
				width: 150,
				editable: true,
				editoptions: {
				size: 10
				}
			}
		],
		rowNum: 15, //一页显示多少条
		rowList: [5, 8, 12], //可供用户选择一页显示多少条
		pager: '#pager2', //表格页脚的占位符(一般是div)的id
		sortname: 'id', //初始化的时候排序的字段
		sortorder: "desc", //排序方式,可选desc,asc
		mtype: "get", //向后台请求数据的ajax的类型。可选post,get
		viewrecords: true,
		pgbuttons: true,
		height: "100%",
		caption: "jqGrid Table", //表格的标题名字	
		editurl: '../data/JSONData.json',

		//触发事件
		onSelectRow: function(id) {
			//alert('you select me!shit!my id is:' + id + "I will be destored");
			currentId = id;
			//			jQuery("#list2").jqGrid('delRowData',id);//调用方法
		},
		beforeSelectRow: function(id, e) {
			return true;
		},

	});

	/*创建jqGrid的操作按钮容器*/
	/*加入自定義按鈕*/
	jQuery("#list2").navGrid('#pager2', {
		edit: true,
		add: true,
		del: true,
		search: true
	})

}